<template>
  <div class="filtrate-module">
    <el-date-picker
      class="date-picker-model"
      v-model="datePickerModel"
      :type="datePickerConfig.type"
      :placeholder="datePickerConfig.placeholder"
      :value-format="datePickerConfig.valueFormat"
      :clearable="false"
      @change="(event) => changeTime(event)"
      size="small"
    />
  </div>
</template>

<script setup>
import {defineEmits, ref, onMounted, defineProps} from "vue";

const props = defineProps({

});

const emit = defineEmits(['changeFiltrateTime'])

const datePickerModel = ref('')
const datePickerConfig = ref({
  type: 'monthrange',
  valueFormat: 'YYYY-MM'
})

const changeTime = (item) => {
  console.log(item);
  emit('changeFiltrateTime', { item })
}

onMounted(() => {
  const date = new Date();
  const year = date.getFullYear();
  const month = `${date.getMonth() + 1 > 9 ? '' : 0}${date.getMonth() + 1}`
  datePickerModel.value = [`${Number(year).toString()}-${month}`, `${Number(year+1).toString()}-${month}`]
})
</script>

<style scoped lang="less">
.filtrate-module {
  display: flex;
  align-items: center;
  .date-picker-model {
    width: 100px;
  }
  /deep/ .date-picker-model {
    width: 90px;
    height: 24px;
  }
  /deep/ .el-input__wrapper {
    background: #204485;
    .el-range-input, .el-range-separator {
      color: white;
    }
  }
}
:deep(.el-date-editor) {
  opacity: 1;
}
</style>